<!-- Teacher_StudyCourseInfo.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>MOOC课程详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
    <link rel="stylesheet" href="../../css/CFNetPP_Base.css">
    <link rel="stylesheet" href="../../css/base.css">
    <style type="text/css">
        html, body {
            background-color: white;
        }

        .teacher-mine .user_info_div {
            text-align: center;
            /*background-image: url('../../image/bg_big.png');*/
            color: white;
            background-size: 100% 100%;
            padding-bottom: 30px;
            height: 240px;
            background-color: #36353a;
        }

        .teacher-mine .user_info_label {
            text-align: center;
            color: white;
            background-image: url('../../image/bg_small.png');
        }

        .teacher-mine #usericon {
            width: 76px;
            height: 76px;
            border-radius: 4em;
            border: 2px solid #fff;
            overflow: hidden;
            margin-top: 86px;
        }

        .teacher-mine .user_name_div {
            padding: 8px 0;
        }

        .teacher-mine .user_tag_div {
            padding: 20px 80px;
        }

        .teacher-mine table {
            width: 100%;
        }

        .teacher-mine .background-white-line-tr th {
            width: 100px;
            height: 20px;
        }

        .teacher-mine .white-line {
            border-right: 1px solid #fff;
        }

        .teacher-mine #user_school {
            border-right: 1px solid #fff;
        }

        .teacher-mine #user_class {
            border-left: 1px solid #fff;
        }

        .teacher-mine .user_tag_icon {
            height: 24px;
        }

        .teacher-mine .user_info_th {
            padding: 10px;
        }

        .teacher-mine .user_tag_text {
            margin-top: 2px;
        }

        .teacher-mine .cell_img {
            width: 16px;
            height: 16px;
        }

        .teacher-mine .cell_left_img_div {
            width: 26px;
            height: 20px;
            float: left;
            padding: 3px 10px 2px 0;
        }

        .teacher-mine .mui-table-view {
            margin-top: 10px;
        }

        .teacher-mine #offline_btn {
            text-align: center;
        }

        .teacher-mine .user-info {
            position: relative;
            bottom: 32px;
            left: 0;
        }

        .teacher-mine .user-info .user-info-box {
            width: 50%;
        }

        .teacher-mine .user-info .left-box {
            float: left;
            /*padding-right: 40px;*/
        }

        .teacher-mine .user-info .right-box {
            float: right;
            /*padding-left: 40px;*/
        }

        .teacher-mine .user-info .left-title {
            text-align: right;
        }

        .teacher-mine .user-info .right-title {
            text-align: left;
        }

        .teacher-mine .user-info p {
            margin-bottom: 0;
        }

        .teacher-mine .user-info .content-title {
            font-size: 16px;
            color: white;
            text-align: center;
        }

        .teacher-mine .user-info .tag-title {
            font-size: 14px;
            color: #939393;
            text-align: center;
        }

        .teacher-mine .user_info_div .modal-div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 240px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .teacher-mine .user_info_div .modal-content-div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 240px;
            background-color: rgba(0, 0, 0, 0);
        }

        .teacher-mine .user_info_div .back-btn {
            position: absolute;
            top: 22px;
            left: 0;
            width: 44px;
            height: 44px;
            padding: 12px;
        }

        .teacher-mine .user_info_div .back-btn-img {
            height: 20px;
        }

        .teacher-mine .user_info_div .nav-title-p {
            width: 100%;
            padding: 0 44px;
            position: absolute;
            left: 0;
            top: 22px;
            font-size: 18px;
            line-height: 44px;
            color: white;
            margin-bottom: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .teacher-mine .course-info {
            padding: 10px 15px;
            background-color: #ececec;
            font-size: 18px;
            color: #535353;
        }

        .teacher-mine .course-info-content {
            padding: 20px 15px 60px 15px;
            font-size: 14px;
            color: #535353;
            /*text-indent: 2em;*/
            word-wrap: break-word;
            white-space: pre-line;
        }

        .teacher-mine .footer-view {
            position: fixed;
            left: 0;
            bottom: 0;
            margin: 0;
            width: 100%;
            height: 50px;
            padding: 0;
        }

        .teacher-mine .footer-view .mui-btn-block {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #ff9900;
            border-color: #ff9900;
            color: white;
            font-size: 16px;
        }

        .teacher-mine .footer-view .mui-btn-block:active {
            background-color: #ff9900;
        }

        .teacher-mine .user_info_div .course-image {
            width: 100%;
            height: 240px;
            position: absolute;
            left: 0;
        / / top: 20 px;
        }

        .mui-btn, button {
            border-radius: 0px;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .course-image-div {
            background-image: url(../../image/bg_big.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
<div class="teacher-mine">
    <div class="user_info_div">
        <!-- <img id="course_image" src="../../image/bg_big.png" class="course-image"> -->
        <div id="course_image" class="course-image course-image-div"></div>
        <div class="modal-div"></div>
        <div class="modal-content-div">
            <p id="course_name" class="nav-title-p"></p>
            <a id="btnBack" class="back-btn" href="#" onclick="backClick()" style="z-index: 99;"> <img
                    class="back-btn-img" src="../../image/icon_jiantou.png" alt=""> </a>
            <img id="usericon" src="../../image/icon_teacher_normal.png" alt="">
            <div class="user_tag_div base_tag_font">
                <table>
                    <thead>
                    <tr class="background-white-line-tr">
                        <th class="white-line"></th>
                        <th></th>
                    </tr>
                    </thead>
                </table>
                <div class="user-info">
                    <div class="user-info-box left-box">
                        <p id="speaker" class="left-title content-title"></p>
                        <p class="left-title tag-title">
                            主讲人
                        </p>
                    </div>
                    <div class="user-info-box right-box">
                        <p id="course_time" class="right-title content-title"></p>
                        <p class="right-title tag-title">
                            课时
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="course-info">
            课程介绍
        </div>
        <div id="course_info" class="course-info-content">
            暂无介绍
        </div>

    </div>
    <div class="footer-view">
        <button id="study_btn" type="button" onclick="onStudyClick()" class="mui-btn mui-btn-block"></button>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var conversationId;
    var conversationName;
    var effective_state;
    var isNewTrain;//是否是新版模块化实训
    var isTrain;//是否是模块化实训
    apiready = function () {
        var topHeight = api.safeArea.top;
        $("#btnBack").css('top', topHeight);
        $("#course_name").css('top', topHeight);

        setStudyBtn();
        setupCourseData();
        laodData();
        if (api.pageParam.hasOwnProperty("opentype") && api.pageParam.opentype == "courseCenter") {//从选课中心过来
            sendBuriedNotifi('0', '选课中心课程', '079', 0);
        } else if (api.pageParam.openType == "skillCourse") {
            var message = "学习技能课程" + "《" + api.pageParam.title + "》" + "</br>" + api.pageParam.quarter_name + "认证";
            SendBehaviorTrajectoriesNotifi_Authentication('0', '技能课程列表详情页', '130', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title, message);
        } else {
            sendBuriedNotifi('0', 'MOOC课程详情', '007', 1);
        }
        kebackListen();
        addCourseBrowsWithCid(api.pageParam.courseid);
    }

    function setStudyBtn() {
        if (api.pageParam.userType == '1') {
            $('#study_btn').text('开始授课');
        } else {
            $('#study_btn').text('进入学习');
        }
    }

    function laodData(callback) {
        var course_param = api.pageParam;
        var urlString = study_course_detail;
        var params = {
            uid: $api.getStorage('cfnetppuid'),
            cid: course_param.courseid,
            jid: $api.getStorage('cfnetppjxid'),
            pid: course_param.planid
        };
        cfnetppPOST(urlString, params, true, function (data, status) {
            if (status == 'success') {
                if (data.status == true) {
                    var courseData = data.data;
                    conversationId = courseData.group_id;
                    conversationName = courseData.group_name;
					effective_state = courseData.effective_state;
                    isNewTrain = courseData.channel=='train' && courseData.isnew===1;
                    isTrain = courseData.channel=='train';
                    $('#course_info').text(courseData.courseinfo);
                    $('#speaker').text(courseData.speaker);
                    var coursetime = courseData.coursenum;
                    if (coursetime == null || coursetime == '') {
                        coursetime = 0;
                    }
                    $('#course_time').text(coursetime);
                    // $('#usericon').attr('src',imageUrlWithStr(courseData.picurl));
                    if (api.pageParam.openType == 'share') {//如果是分享课程
                        var nextPageParam = courseData;
                        nextPageParam["cstatus"] = courseData.status;
                        nextPageParam["course_name"] = courseData.coursename;
                        nextPageParam["courseid"] = api.pageParam.courseid;
                        nextPageParam["planid"] = api.pageParam.planid;
                        nextPageParam["coverimages"] = imageUrlWithStr(courseData.coverimages);
                        nextPageParam["opentype"] = 'courseCenter';
                        api.pageParam = nextPageParam;
                        // $('#course_image').attr('src', nextPageParam.coverimages);
                        $('#course_image').attr('style', 'background-image: url(' + nextPageParam.coverimages + ')');
                        if (callback) {
                            callback(true);
                        }
                    }
                } else {
                    api.toast({
                        msg: '课程详情加载失败'
                    });
                    if (callback) {
                        callback(false);
                    }
                }
            } else {
                api.toast({
                    msg: '课程详情加载失败'
                });
                if (callback) {
                    callback(false);
                }
            }
        });
    }

    function sendBuriedNotifi(busionessid, pagetype, pagetypeid, type) {
        var userinfo = {
            uid: $api.getStorage('cfnetppuid'),
            jid: $api.getStorage('cfnetppjxid'),
            uname: $api.getStorage('cfnetppusername'),
            cid: api.pageParam.courseid,
            pid: api.pageParam.planid
        }
        if (type == 0) {
            userinfo['message'] = api.pageParam.course_name
        }
        var data = {
            busionessid: busionessid,
            pagetype: pagetype,
            pagetypeid: pagetypeid,
            sourceurl: api.pageParam.sourceurl,
            sourcetitle: api.pageParam.sourcetitle,
            accesspageurl: window.location.pathname,
            accesspagetitle: document.title,
            userinfo: userinfo,
        }

        SendBehaviorTrajectoriesNotifi_Study(data);
    }

    function setupCourseData() {
        var imageUrl = api.pageParam.coverimages;
        // $('#course_image').attr('src', imageUrl);
        $('#course_image').attr('style', 'background-image: url(' + imageUrl + ')');
        // $('.teacher-mine .user_info_div').attr('background-image','url("'+imageUrl+'");');
        var coursename = api.pageParam.coursename;
        $('#course_name').text(coursename);
    }

    function onStudyClick() {
        if (api.pageParam.openType == 'share') {//如果是分享课程
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '',
                text: '加载课程数据中',
                modal: false
            });
            laodData(function (status) {
                api.hideProgress();
                if (status) {
                    openCourseDetail();
                }
            });
        } else {
            openCourseDetail();
        }
    }

    function openCourseDetail() {
        sendBuriedNotifi('1', 'MOOC课程详情', '007');
        api.pageParam["sourceurl"] = window.location.pathname;
        api.pageParam["sourcetitle"] = document.title;
        api.pageParam["isNewTrain"]=isNewTrain;//课程类型
        api.pageParam["isTrain"]=isNewTrain;//课程类型
        console.log("channel:"+api.pageParam.channel);
        if (api.pageParam.openType == 'train_stu') {
            api.openWin({useWKWebView:true,
                name: 'Student_trainCourseMoocTab',
                url: '../Study/Student_trainCourseMoocTab.html',
                pageParam: api.pageParam
            });
            return;
        }
        if (api.pageParam.opentype == 'courseCenter' || api.pageParam.openType == "skillCourse") {

            api.pageParam["selectedStatus"] = 1;
            api.openWin({useWKWebView:true,
                name: 'CourseCenter_CourseDetail',
                url: '../CourseCenter/CourseCenter_CourseDetail.html',
                pageParam: api.pageParam
            });
        } else {
            api.pageParam.conversationInfo = {
                conversationId: conversationId,
                conversationName: conversationName,
				effective_state:effective_state
            };

            api.openWin({useWKWebView:true,
                name: 'Teacher_StudyCourseMoocTab',
                url: 'Teacher_StudyCourseMoocTab.html',
                pageParam: api.pageParam
            });
        }
    }

    function imageUrlWithStr(string) {
        if (string == null || string == undefined || string == '') {
            return '';
        }
        if (string.indexOf("http://") == -1) {
            if (string.indexOf("learn/") == -1) {
                return 'http://bos.cfnet.org.cn/' + string;
            } else {
                return 'http://cfnet.org.cn/data/uploads/' + string;
            }
        } else {
            return string;
        }
    }

    function kebackListen() {
        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            //coding...
            backClick();
        });
    }

    function backClick() {
        if (api.pageParam.hasOwnProperty("opentype") && api.pageParam.opentype == "courseCenter") {//从选课中心过来
            sendBuriedNotifi('1', '选课中心课程', '079', 0);
        } else if (api.pageParam.openType == "skillCourse") {
            var message = "学习技能课程" + "《" + api.pageParam.title + "》" + "</br>" + api.pageParam.quarter_name + "认证";
            SendBehaviorTrajectoriesNotifi_Authentication('0', '技能课程列表详情页', '130', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title, message);
        } else {
            sendBuriedNotifi('1', 'MOOC课程详情', '007', 1);
        }
        api.closeWin();
    }
</script>
</html>